import React from 'react'
import Songs from '@/assets/fonts/songs.svg'
import { useSelector } from 'react-redux'
import { RootState } from '@/modules/RootState'
import { returnArray } from '@/utils/checkKeyStorage'

function CreateMusic() {
  console.log('创建音乐列表')

  const musicList = useSelector((state:RootState) => state.musicList)
  const user = useSelector((state:RootState) => state.user)
  
  return (
    <div>
        <ul>
            {
              user.userSubcount.createdPlaylistCount
              &&
              musicList?.musicList.length
              &&
              musicList.musicList.slice(1,user.userSubcount.createdPlaylistCount).map((item,index)=>{
                  return(
                    <li key={index}>
                      <img src={Songs} alt="" />
                      <span>{item.name}</span>
                    </li>
                  )
              })
            }
        </ul>
    </div>
  )
}

export default React.memo(CreateMusic)